<template>
    <div>
        <div class="title" @click="toggle">{{ title }}</div>
        <div class="content" ref="content" :style="{ height: flag ? '110px' : 0 }">
            <div class="scroll" ref="scrollEl" @mousewheel="scrollHandler">
                <slot></slot>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const offsetX = ref('0px')
const content = ref<HTMLElement>()
const scrollEl = ref<HTMLElement>()
const prop = defineProps<{
    title: string
    flag: boolean
}>()
const emit = defineEmits<{
    (e: 'open', val: boolean): void
}>()

const toggle = () => {
    emit('open', prop.flag)
}
function scrollHandler(e: WheelEvent) {
    let offset = parseInt(offsetX.value) + e.deltaY * 0.6
    const min = scrollEl.value!.scrollWidth - content.value!.clientWidth
    offset = Math.max(-min, offset)
    offset = Math.min(0, offset)
    offsetX.value = offset + 'px'
}
</script>

<style lang="scss" scoped>
.content {
    transition: height .3s ease;
    overflow: hidden;

    .scroll {
        width: max-content;
        transform: translateX(v-bind(offsetX));
        transition: all .3s;
    }
}

.title {
    box-shadow: 0 0px 1px 0px rgba(0, 0, 0, 0.15);
    font-size: 14px;
    padding: 3px 8px;
    background: var(--color-tab-background);
    user-select: none;
    cursor: pointer;
}
</style>